<template>
  <div class="settings">
    <div class="settings-body">
      <h1 class="usrinfo">&nbsp;&nbsp;用户信息</h1>
      <el-container :direction="horizontal">
        <el-aside width="20%">
          <div class="grid-content">
              <img src="../../assets/images/avatar-grey-bg.jpg" style="height:170px;" alt="Image">
              <h2 class="usrname" >{{ this.$store.state.user.username }}</h2>
          </div>
        </el-aside>
          <el-main >

            <el-card class="box-card2">

              <div >
                <div>
                  <h2 style="margin-left: 80px; text-align: left">账户设置</h2>
                  <div class="a-info2">
                    <p class="liltitle">用户名</p>
                    <span class="content">
                      {{ this.$store.state.user.username }}&nbsp;&nbsp;&nbsp;</span>
                      <i class="el-icon-edit"></i>
                      <p class="liltitle">邮箱地址</p>
                    <span class="content">{{ this.$store.state.user.email }}&nbsp;&nbsp;&nbsp;</span>
                    <i class="el-icon-edit"  @click="dialogFormVisible2=true"></i>

                    <p class="liltitle">密码</p>
                    <el-button type="default" size="small" @click="dialogFormVisible=true" style="margin-left:0;">修改密码</el-button>
                  </div>

                  <div>
                    <el-dialog  width="515px" title="修改密码" :visible.sync="dialogFormVisible">
                      <el-form :model="form">
                        <el-form-item label="旧密码" label-width="80px">
                          <el-input type="password" show-password v-model="form.old" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" label-width="80px">
                          <el-input type="password" show-password v-model="form.new" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" label-width="80px">
                          <el-input  type="password" show-password v-model="form.newagain" autocomplete="off"></el-input>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="clearPasswordForm">取 消</el-button>
                        <el-button type="primary" @click="changePassword">确 定</el-button>
                      </div>
                    </el-dialog>
                  </div>

                  <div>
                    <el-dialog width="500px" title="更换邮箱地址" :visible.sync="dialogFormVisible2" center>
                      <el-form :model="form">
                        <el-form-item label="邮箱地址" label-width="70px">
                          <el-input v-model="form.email" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码" label-width="70px">
                          <el-input v-model="form.code" style="width: 240px"></el-input>
                          <el-button @click="sendConfirmCode">发送验证码</el-button>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="clearEmailForm">取 消</el-button>
                        <el-button type="primary" @click="changeEmail">确 定</el-button>
                      </div>
                    </el-dialog>
                  </div>

                </div>
              </div>
            </el-card>
          </el-main>
      </el-container>


      <el-row :gutter="20">


        <el-col :span="6">

        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import user from "../../store/user";

export default {
  name: "settings",
  data() {
    return {
      info: {
        username: "",
        email: "",
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {
        old: "",
        new: "",
        newagain: "",
        email: "",
        code: ""
      },
    }
  },
  // 获取个人基本信息
  created() {
    const userInfo = user.getters.getUser(user.state());
    //const userInfo = user.getters.getUser(user.state());

    // 若未检测到登录信息，则跳转登录界面
    if (!this.$store.state.isLogin) {
      this.$message.warning("请先登录");
      setTimeout(() => {
        this.$router.push("/login");
      }, 1000);
    }

    //const _formData = new FormData();
    //_formData.append("Authorization", userInfo.user.Authorization);
    //_formData.append("user_id", userInfo.user.userId);
    //console.log(_formData);
    //this.$axios({
    //  method: 'post',
    //  url: '/user/info',
    //  data: _formData,
    //})
    //    .then(res => {
    //      if (res.data.success) {
     //       this.info = res.data.data;
     ///     } else {
     //       this.$message.warning("用户信息错误，请重新登录");
     //       setTimeout(() => {
     //         this.$store.dispatch('clear');
     //         this.$router.push("/login");
      //      }, 1000);
     //     }
     //   })
     //   .catch(err => {
     //     console.log(err);
      //  })
  },
  // beforeRouteEnter(to,from,next){
  //   if(!sessionStorage.getItem('userId')){
  //     next('/')
  //   }
  //   else next()
  // },
  methods: {
    clearEmailForm() {
      this.dialogFormVisible2 = false;
      this.form.email = '';
    },
    clearPasswordForm() {
      this.dialogFormVisible = false;
      this.form.newagain = '';
      this.form.old = '';
      this.form.new = '';
    },
    //TODO: 修改邮箱地址前，发送邮箱验证码
    sendConfirmCode() {
      if (this.form.email === '') {
        this.$message.warning("输入不能为空！");
        return;
      }
      //const formData = {
      //  email:"2291523247@qq.com",
      //  uid:"8"
     // }
      //const formData = new FormData();
      //formData.append("email", this.form.email);
      //formData.append("uid", this.$store.state.user.userId);
      //formData.append("uid", 8);
      //this.$axios({
      //  method: 'post',
       // url: '/user/sendCode',
       // data: JSON.stringify(formData),
     // })
      this.$axios.post('/user/sendCode', {
        "email":this.form.email,
        "uid":this.$store.state.user.userId

      })
          .then(res => {
            if (res.data.code === 0) {
              this.$message.success("验证码已发送至您的邮箱");
            } else {
              this.$message.warning("验证码发送失败");
              this.form.email = '';
            }
          })
          .catch(err => {
            console.log(err);
          });
    },
    //TODO: 填入验证码后发送修改邮箱请求
    changeEmail() {
      if (this.form.code === '' || this.form.email === '') {
        this.$message.warning("输入不能为空！");
        return;
      }
      //const formData = new FormData();
      //formData.append("email", this.form.email);
      //formData.append("code", this.form.code.trim());
      //formData.append("uid", this.$store.state.user.userId);
      //this.$axios({
      //  url: '/user/modifyEmail',
      //  method: 'post',
      //  data: JSON.stringify(formData),
     // })
      this.$axios.post('/user/modifyEmail', {
        "email": this.form.email,
        "code":this.form.code.trim(),
        "uid":this.$store.state.user.userId

      })
          .then(res => {
            if (res.data.code === 0) {
              this.$message.success("修改邮箱成功！");
              this.$store.state.user.email = this.form.email;
              this.form.code = '';
              this.form.email = '';
              this.dialogFormVisible2 = false;
            } else {
              this.$message.warning(res.data.msg);
              this.form.email = '';
              this.form.code = '';
            }
          })
          .catch(err => {
            console.log(err);
          });
    },
    //TODO: 修改密码
    changePassword() {
      if (this.form.new !== this.form.newagain) {
        this.$message.error("两次输入的密码不同");
        this.form.newagain = '';
        this.form.old = '';
        this.form.new = '';
        return;
      }
      const reg=/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
      if (!reg.test(this.form.new)) {
        this.$message.error("密码不符合规范，须由8-18个字符组成，且同时包含字母和数字");
        this.form.newagain = '';
        this.form.old = '';
        this.form.new = '';
        return;
      }

      //const userInfo = user.getters.getUser(user.state());

     // const formData = new FormData();
      //formData.append("password", this.form.old);
     // formData.append("password_new", this.form.newagain);
      //formData.append("Authorization", userInfo.user.Authorization);
      //formData.append("uid", this.$store.state.user.userId);

      //this.$axios({
      //  method: 'post',
      //  url: '/user/modifyPass',
      //  data: JSON.stringify(formData),
    //  })
      this.$axios.post('/user/modifyPass', {
        "password":this.form.old,
        "password_new": this.form.newagain,
        "uid":this.$store.state.user.userId

      })
          .then(res => {
            if (res.data.code === 0) {
              this.$message.success("修改成功");
              this.dialogFormVisible = false;
            } else {
              this.$message.success("修改成功");
              this.dialogFormVisible = false;
            }
          })
          .catch(err => {
            console.log(err);
          })
      this.form.newagain = '';
      this.form.old = '';
      this.form.new = '';
    }
  }
}
</script>

<style scoped>
.content{
  display:inline-block;
}
.liltitle{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 1.2rem;
  color: #8c8889;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 0.6rem;
}
.usrname{
  font-family: source-han-sans-simplified-c, sans-serif;
  font-size: 30px;
  padding-top: 0px;
  color: black;
  font-weight: normal;
}
.usrinfo{
  font-family: source-han-sans-simplified-c, sans-serif;
  font-size: 40px;
  padding-top: 0px;
  color: black;
  font-weight: 500;
}
.settings {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;

}
.settings .settings-body {
  margin-top: 40px;
  width: 75%;
  padding: 20px;
}
.settings >>> .el-button {
  color: #2d94d4;
  background-color: white;
  font-size: 14px;
  margin-left: 20px;
}
.settings .a-info2 {
  margin: 30px 30px 30px 80px;
  text-align: left;
}
.settings .box-card1 {
  /* width: 425px; */
  /* margin: 10px; */

}
.settings .box-card2 {
  /* width: 900px; */
  margin: 0 30px;
  border-radius: 2;
}
.settings >>>.el-row {
  margin-bottom: 20px;
}
.settings >>> .el-col {
  border-radius: 4px;
}
.settings .grid-content {
  margin: 20px;
  padding:40px 0 40px 0;
  text-align: center;
  border-radius: 25px;
  background-color: #F3F3F3;

  /* min-height: 36px; */
}
.settings .row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>